<template>
	<view class="content">
		<navgate-bar-vue :isBack="true" title="个人资料"></navgate-bar-vue>

		<view class="login_img" @click="handleChooseImage">
			<image mode="aspectFill" :src="imageValue.length ? imageValue[0].url : '/static/images/moren.jpeg'" />
			<view v-if="uploading" class="upload-mask">上传中...</view>
		</view>

		<view class="login_from">

			<view class="login_from_input">
				<view class="login_from_name">学号</view>
				<view class="login_from_fun"><input v-model="listData.username" type="number" placeholder="请输入11位数字学号"
						disabled="true">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">昵称</view>
				<view class="login_from_fun"><input v-model="listData.nickname" type="digit" placeholder="请输入昵称"></view>
			</view>
			<view class="login_from_input">
				<view class="login_from_name">姓名</view>
				<view class="login_from_fun"><input v-model="listData.realName" type="digit" placeholder="请输入姓名"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">学院</view>
				<view class="login_from_fun"><input v-model="listData.college" type="digit" placeholder="请输入学院"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">年级</view>
				<view class="login_from_fun"><input v-model="listData.grade" type="digit" placeholder="请输入年级"></view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">班级</view>
				<view class="login_from_fun"><input v-model="listData.userClass" type="digit" placeholder="请输入班级">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">联系</view>
				<view class="login_from_fun"><input v-model="listData.contactInfo" type="digit" placeholder="请输入邮箱">
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">性别</view>
				<view class="login_from_fun">
					<radio-group @change="handleSexChange" class="group">
						<label>
							<radio style="transform: scale(0.55) translateY(-1px);color: #666;" class="demoHidden"
								value="0" :checked="listData.sex === 0" />男
						</label>
						<label>
							<radio style="transform: scale(0.55) translateY(-1px);color: #666;" class="demoHidden"
								value="1" :checked="listData.sex  === 1" />女
						</label>
					</radio-group>
				</view>
			</view>

			<view class="login_from_input">
				<view class="login_from_name">密码</view>
				<view class="login_from_fun"><input v-model="listData.password" type="password" placeholder="请输入密码">
				</view>
			</view>

			<view class="login_from_dl">
				<button @click="handleRegister">修改</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		AppUploadFileApi
	} from "@/api/upload";
	import {
		AppUpdateApi
	} from '@/api/my';
	import {
		useUserStore
	} from '@/store';

	const imageValue = ref([]);

	// 注册数据
	const listData = ref({
		username: '',
		nickname: '',
		realName: '',
		college: '',
		grade: '',
		userClass: '2',
		contactInfo: '',
		avatarUrl: '',
		password: '',
		sex: ''
	});

	// 获取本地数据
	const userStore = useUserStore();
	onMounted(() => {
		listData.value = {
			username: userStore.username,
			nickname: userStore.nickname,
			realName: userStore.realName,
			college: userStore.college,
			grade: userStore.grade,
			userClass: userStore.userClass,
			contactInfo: userStore.contactInfo,
			avatarUrl: userStore.avatarUrl,
			sex: userStore.sex
		};
	});

	const handleSexChange = (event) => {
		listData.value.sex = event.detail.value;
	};

	const handleRegister = async () => {
		uni.showModal({
			title: '确认修改',
			content: '确定要修改个人资料吗？',
			success: async (res) => {
				if (!res.confirm) {
					// 用户点击了取消，直接返回，不执行后续代码
					return;
				}

				// 学号校验
				if (!/^\d{11}$/.test(listData.value.username)) {
					uni.showToast({
						title: '请输入正确的学号（11位数字）',
						icon: 'none'
					});
					return;
				}

				// 其他字段不能为空的校验
				if (!listData.value.nickname.trim()) {
					uni.showToast({
						title: '昵称不能为空',
						icon: 'none'
					});
					return;
				}

				if (!listData.value.college.trim()) {
					uni.showToast({
						title: '学院不能为空',
						icon: 'none'
					});
					return;
				}

				if (!listData.value.grade.trim()) {
					uni.showToast({
						title: '年级不能为空',
						icon: 'none'
					});
					return;
				}

				if (!listData.value.userClass.trim()) {
					uni.showToast({
						title: '班级不能为空',
						icon: 'none'
					});
					return;
				}

				if (!listData.value.avatarUrl.trim()) {
					uni.showToast({
						title: '头像不能为空',
						icon: 'none'
					});
					return;
				}

				if (!listData.value.contactInfo.trim()) {
					uni.showToast({
						title: '邮箱不能为空',
						icon: 'none'
					});
					return;
				}

				try {
					// 调用更新 API
					const response = await AppUpdateApi(listData.value);
					if (response.code === 1) {
						uni.showToast({
							title: '修改成功',
							icon: 'success'
						});

						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/index'
							});
						}, 1000);
					}
				} catch (error) {
					console.error('修改失败', error);
					uni.showToast({
						title: '修改失败，请重试',
						icon: 'none'
					});
				}
			}
		});
	};

	const uploading = ref(false);

	// 图片选择与上传逻辑
	const handleChooseImage = async () => {
		try {
			const res = await uni.chooseImage({
				count: 1,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera']
			});

			const tempFilePath = res.tempFilePaths[0];
			imageValue.value = [{
				url: tempFilePath
			}];

			uploading.value = true;
			const uploadRes = await AppUploadFileApi(tempFilePath);

			if (uploadRes && uploadRes.data && uploadRes.data) {
				listData.value.avatarUrl = uploadRes.data;
				uni.showToast({
					title: '头像上传成功',
					icon: 'success'
				});
			} else {
				throw new Error("上传失败，服务器返回的数据不正确");
			}
		} catch (error) {
			uni.showToast({
				title: '上传失败，请重试',
				icon: 'none'
			});
			console.error('上传错误:', error);
		} finally {
			uploading.value = false;
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background: #fff;
	}

	.login_img {
		width: 100%;
		height: auto;
		margin-top: 50upx;
	}

	.login_img image {
		width: 170upx;
		height: 170upx;
		display: block;
		margin: 0px auto;
		border-radius: 50%;
	}

	.login_from {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		padding: 20upx 8%;
	}

	.login_from_input {
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px #eee solid;
		padding: 40upx 0px;
		margin: 0px auto;
	}

	.login_from_name {
		width: 20%;
	}

	.login_from_fun {
		width: 80%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.login_from_fun input {
		width: 100%;
		text-align: left;
		font-size: 14px;
	}

	.login_from_dl {
		width: 100%;
		height: 50px;
		line-height: 50px;
	}

	.login_from_dl button {
		margin-top: 20rpx;
		width: 100%;
		height: 50px;
		line-height: 50px;
		background: #4796e8;
		color: #fff;
		border-radius: 50px;
	}

	.logo_xieyi {
		width: 100%;
		height: 40px;
		line-height: 40px;
		display: flex;
		flex-direction: row;
		margin-top: 30upx;
		align-items: center;
		color: #444;
		font-size: 14px;
		justify-content: center;
	}

	.logo_xieyi label {
		font-size: 18px;
		margin-right: 1%;
		display: block;
		width: 15%;
	}

	.logo_xieyi input {
		width: 20%;
		display: block;
	}

	.logo_xieyi a {
		color: #4796e8;
	}

	.logo_xieyi .logo_xieyi1 {
		margin-top: 30px;
	}
</style>